<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<style>
    *{
        margin:0;
        padding:0;
    }
    ul{
        list-style-type:none;
    }
    #box{
        position:relative;
        width:490px;
        height:190px;
        background:#000;
        border-radius:5px;
        border:8px solid #000;
        margin:10px auto;
        margin-top:150px;
    }
    #box .list{
        position:relative;
        width:490px;
        height:170px;
        overflow:hidden;
		border:1px solid #ccc;
    }
    #box .list li{
        position:absolute;
        top:0;
        left:0;
        width:710px;
        height:450px;
        opacity:0;
        filter:alpha(opacity=0);
    }
    #box .list li.current{
        opacity:1;
        filter:alpha(opacity=100);
    }
    #box .count{
        position:absolute;
        right:0;
        bottom:5px;
    }
    #box .count li{
        color:#224b8f;
        float:left;
        width:20px;
        height:20px;
        cursor:pointer;
        margin-right:8px;
        overflow:hidden;
        background:#afb4db;
        opacity:0.7;
        filter:alpha(opacity=70);
        border:1px solid #78a355;
        border-radius:10px;
        font-size:15px;
    }
    #box .count li.current{
        opacity:1;
        filter:alpha(opacity=100);
        font-weight:700;
        background:#afb4db;
    }
</style>

<script>
    window.onload = function(){
        var oBox= document.getElementById("box");
        var aUl = document.getElementsByTagName("ul");
        var aImg = aUl[0].getElementsByTagName("li");
        var aNum = aUl[1].getElementsByTagName("li");
        var timer = play = null;
        var i = index = 0 ;

        //切换按钮
        for (i= 0;i<aNum.length ;i++ )
        {
            aNum[i].index= i ;
            aNum[i].onmouseover = function(){
                show(this.index);
            }
        }
        //鼠标在图片上则关闭定时器
        oBox.onmouseover = function(){
            clearInterval(play);
        }

        //自动播放
        function autoPlay(){
            play = setInterval(function(){
                index++;
                index >= aImg.length && (index = 0);
                show(index);
            },3000);
        }
        autoPlay();

        //鼠标离开图片时自动播放
        oBox.onmouseout = function(){
            autoPlay();
        }

        function show(a){
            if(aNum[a].className != "current"){
                index = a;
                var alpha = 0;
                for (i=0;i<aNum.length ;i++ )
                {
                    aNum[i].className="";
                }
                aNum[index].className="current";
                clearInterval(timer);

                for(i = 0;i<aImg.length;i++){
                    aImg[i].style.opacity = 0;
                    aImg[i].style.filter="alpha(opacity=0)";
                }
                timer = setInterval(function(){
                    alpha +=4;
                    alpha>100 && (alpha=100);
                    aImg[index].style.opacity=alpha/100;
                    aImg[index].style.filter = "alpha(opacity="+alpha+")";
                    alpha == 100 && clearInterval(timer);
                },20);
            }
        }
    };
</script>

<body>
<div id="box">
        <ul class="list">
            <li class="current"><img src="res06/01.jpg" /></li>
            <li><img src="res06/02.jpg" /></li>
            <li><img src="res06/03.jpg" /></li>
            <li><img src="res06/04.jpg" /></li>
            <li><img src="res06/05.jpg" /></li>
        </ul>
        <ul class="count">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
</div>
</body>

</html>